@charset "utf-8";

/*
    @author xiao
    @des: APP端基础方法
    @使用心得:
        -适配方案参考淘宝开源库lib.flexible
        -布局rem动态适配
        -字体dpr动态适配
        -和文字相关的布局用px写死比较好。。。因为用rem会和没有用rem布局的字体有错位
        -目前市面上有三种代表的适配方案：
            1. 直接750设计稿除以2适配所有机型，布局采用百分比：代表网站 拉勾网
            2. 动态改变html font-size基准，所有元素以rem适配：代表网站 小米网
            3. 动态改变html font-size基准，所有除字体相关元素以外的rem适配，字体只按分辨率适配：代表网站 淘宝网
 */


/**
 * 基本思想描述：
 * 多屏适配布局问题
 * 移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位rem。
 * 基于rem的原理，我们要做的就是: 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。
 * 这里我们提取了一个公式(rem表示基准值)
 * rem = document.documentElement.clientWidth * dpr / 10
 * 说明：
 * 1）乘以dpr，是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有，dpr=1)。
 * 2）除以10，是为了取整，方便计算(理论上可以是任何值)
 * 所以就像下面这样，html的font-size可能会：
 * iPhone3gs: 320px / 10 = 32px
 * iPhone4/5: 320px * 2 / 10 = 64px
 * iPhone6: 375px * 2 / 10 = 75px
 * iPhone6plus: 414 * 3 / 10 = 124.2px
 */


/*
    px转换成rem
 */

@function px2rem($px, $base-font-size: 64px) {
    @if (unitless($px)) {
        //@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px + 0px); // That may fail.
    }
    @else if (unit($px)==rem) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}


/*  
    默认已iPhone6的750为基准开发
    font-size 不推荐转换成rem
    原因：我们不希望文本在Retina屏幕下变小，
    另外，我们希望在大屏手机上看到更多文本，
    以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。
    注意设计稿是2x屏幕, 所以1x屏幕需要除以2
 */

@mixin font-dpr($font-size) {
    font-size: $font-size /2;
    [data-dpr="2"] & {
        font-size: $font-size;
    }
    [data-dpr="3"] & {
        font-size: $font-size * 1.5;
    }
}


/**
 *  为了和字体适配一样的非字体元素准备的转化方法    
 */

@mixin px-dpr($property, $size, $others:"") {
    #{$property}: $size / 2 #{$others};
    [data-dpr="2"] & {
        #{$property}: $size #{$others};
    }
    [data-dpr="3"] & {
        #{$property}: $size * 1.5 #{$others};
    }
}

$red:red;
@mixin media-screen() {
    @media screen and (min-width: 768px) {
        //pc
        width: 768px;
    }
    @media screen and (max-width: 767px) {
        // moble
        width: 100%;
    }
}

@mixin bg-img() {
    //background-position:0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.center-parent {
    position: relative;
}

.center-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.clearfix {
    zoom: 1;
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
}
.mint-indicator {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
}

$color-1:#e95b47;
.dialog-title {
    //@include font-dpr(38px);
    font-size: px2rem(28);
    letter-spacing: .5px;
    margin: 0 auto;
    display: inline-block;
    @include bg-img();
    padding: 0 px2rem(10);
    line-height: px2rem(2);
    height: px2rem(30);
    margin-bottom: px2rem(10); //background-image: url('./../assets/imgs/nianhua-head.png');
}

@-webkit-keyframes heartbeat {
    0% {
        -webkit-transform: scale(0.96)
    }
    9% {
        -webkit-transform: scale(1.02)
    }
    18% {
        -webkit-transform: scale(0.96)
    }
    25% {
        -webkit-transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1)
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(0.96)
    }
    9% {
        transform: scale(1.2)
    }
    18% {
        transform: scale(0.96)
    }
    25% {
        transform: scale(1)
    }
    100% {
        transform: scale(1)
    }
}

.heartbeat {
    animation: heartbeat ease-in-out 0.8s infinite alternate;
}

@keyframes warnwave {
    0% {
        transform: scale(1.2)
    }
    9% {
        transform: scale(1.1)
    }
    18% {
        transform: scale(1.05)
    }
    25% {
        transform: scale(1)
    }
    100% {
        transform: scale(1.2)
    }
}

.warn-wave {
    animation: warnwave ease-in-out 1s infinite alternate;
}

.warn-wave-cash {
    animation: warnwave ease-in-out .2s 1 alternate;
}

@keyframes cloudeleft {
    0% {
        transform: translate3d(px2rem(-12), 0, 0);
    }
    50% {
        transform: translate3d(px2rem(12), 0, 0);
    }
    100% {
        transform: translate3d(px2rem(-12), 0, 0);
    }
}

@keyframes clouderight {
    0% {
        transform: translate3d(px2rem(12), 0, 0);
    }
    50% {
        transform: translate3d(px2rem(-12), 0, 0);
    }
    100% {
        transform: translate3d(px2rem(12), 0, 0);
    }
}

.cloude-float-left {
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: cloudeleft;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

.cloude-float-right {
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: clouderight;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

.left-cloud {
    position: absolute;
    top: px2rem(60);
    left: px2rem(-10);
    height: px2rem(46);
    @extend .cloude-float-left;
}

.right-cloud {
    position: absolute;
    bottom: px2rem(120);
    right: px2rem(0);
    height: px2rem(46);
    @extend .cloude-float-right;
}

@keyframes ripples {
    0% {
        transform: scale(.8)
    }
    10% {
        transform: scale(.9)
    }
    20% {
        transform: scale(1)
    }
    30% {
        transform: scale(1.1)
    }
    40% {
        transform: scale(1.2)
    }
    50% {
        transform: scale(1.3)
    }
    60% {
        transform: scale(1.2)
    }
    70% {
        transform: scale(1.1)
    }
    80% {
        transform: scale(1)
    }
    90% {
        transform: scale(.9)
    }
    100% {
        transform: scale(.8)
    }
}

.ripples {
    animation: ripples 2s linear infinite;
}

.only-one-line {
    //强制不换行 显示省略号
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.css-x {
    color: #fff; // border: 1px solid red;
    border-radius: 50%;
    line-height: px2rem(20);
    text-align: center;
    height: px2rem(32);
    width: px2rem(32);
    font-size: px2rem(32);
    padding: px2rem(1);
    transform: scale(1.6);
    &:before {
        content: "\00D7";
    }
}